<template>
  <div class="job-card" @click="viewDetail">
    <div class="job-header">
      <h3 class="job-title">{{ job.title }}</h3>
      <div class="job-salary">{{ job.salary || '薪资面议' }}</div>
    </div>

    <div class="job-company">
      <el-image 
        :src="job.companyLogo || ''" 
        :alt="job.companyName || '公司'"
        class="company-logo"
      >
        <template #error>
          <div class="logo-placeholder">
            {{ (job.companyName || '').substring(0, 1) || '?' }}
          </div>
        </template>
      </el-image>
      
      
    </div>

    <div class="job-meta">
      <div class="meta-items">
        <span class="meta-item">{{ job.city || '未知地区' }}</span>
        <span class="meta-item">{{ job.experience || '经验不限' }}</span>
        <span class="meta-item">{{ job.education || '学历不限' }}</span>
      </div>
      
      <div class="job-tags">
        <el-tag 
          v-for="tag in tagsArray" 
          :key="tag"
          size="small"
          class="job-tag"
        >
          {{ tag }}
        </el-tag>
      </div>
    </div>

    <div class="job-footer">
      <div class="post-info">
        <span class="post-time">{{ formatTime(job.postTime) }}</span>
        <span class="post-by">{{ job.recruiterName }} · {{ job.recruiterTitle }}</span>
      </div>
      
     
    </div>
  </div>
</template>

<script setup>
import { Star } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { computed } from 'vue'

const props = defineProps({
  job: {
    type: Object,
    required: true
  }
})

const router = useRouter()
const emit = defineEmits(['apply', 'favorite'])

// 查看职位详情
const viewDetail = () => {
  router.push(`/jobs/${props.job.id}`)
}

// 投递简历
const handleApply = () => {
  emit('apply', props.job)
}

// 收藏/取消收藏
const handleFavorite = () => {
  emit('favorite', {
    jobId: props.job.id,
    isFavorite: !props.job.isFavorite
  })
}

// 格式化发布时间
const formatTime = (time) => {
  // 如果时间为undefined或null，返回默认值
  if (!time) {
    return '刚刚'
  }
  
  const now = new Date()
  const postTime = new Date(time)
  const diff = now - postTime
  
  // 一小时内
  if (diff < 3600000) {
    const minutes = Math.floor(diff / 60000)
    return `${minutes}分钟前`
  }
  
  // 24小时内
  if (diff < 86400000) {
    const hours = Math.floor(diff / 3600000)
    return `${hours}小时前`
  }
  
  // 7天内
  if (diff < 604800000) {
    const days = Math.floor(diff / 86400000)
    return `${days}天前`
  }
  
  // 超过7天显示具体日期
  const year = postTime.getFullYear()
  const month = String(postTime.getMonth() + 1).padStart(2, '0')
  const day = String(postTime.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 将tags字符串拆分为数组的计算属性
const tagsArray = computed(() => {
  if (!props.job.tags) return [];
  return props.job.tags.split(',').map(tag => tag.trim()).filter(tag => tag);
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.css';

.job-card {
  padding: var(--spacing-lg);
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-sm);
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    box-shadow: var(--box-shadow-md);
  }
  
  .job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    
    .job-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .job-salary {
      color: var(--color-success);
      font-weight: 600;
      padding: 2px 10px;
      border-radius: 4px;
      background-color: rgba(var(--color-success-rgb, 103, 194, 58), 0.1);
      white-space: nowrap;
    }
  }
  
  .job-company {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-md);
    
    .company-logo {
      width: 48px;
      height: 48px;
      border-radius: var(--border-radius-sm);
      margin-right: var(--spacing-md);
      
      .logo-placeholder {
        width: 100%;
        height: 100%;
        background: var(--color-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        font-weight: 600;
      }
    }
    
    .company-info {
      .company-name {
        font-size: 1rem;
        color: var(--text-primary);
        margin-bottom: 4px;
      }
      
      .company-meta {
        font-size: 0.9rem;
        color: var(--text-secondary);
      }
    }
  }
  
  .job-meta {
    margin-bottom: var(--spacing-md);
    
    .meta-items {
      margin-bottom: var(--spacing-sm);
      
      .meta-item {
        font-size: 0.9rem;
        color: var(--text-secondary);
        
        &:not(:last-child)::after {
          content: "·";
          margin: 0 var(--spacing-sm);
        }
      }
    }
    
    .job-tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-sm);
      
      .job-tag {
        background: var(--bg-light);
        border: none;
      }
    }
  }
  
  .job-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .post-info {
      font-size: 0.9rem;
      color: var(--text-secondary);
      
      .post-time {
        margin-right: var(--spacing-sm);
      }
    }
    
    .actions {
      display: flex;
      gap: var(--spacing-sm);
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  .job-card {
    .job-header {
      flex-direction: column;
      align-items: flex-start;
      
      .job-salary {
        margin-top: var(--spacing-sm);
      }
    }
    
    .job-footer {
      flex-direction: column;
      gap: var(--spacing-md);
      
      .post-info {
        order: 2;
      }
      
      .actions {
        order: 1;
        width: 100%;
        
        .el-button {
          flex: 1;
        }
      }
    }
  }
}
</style> 